<template>
  <div class="banner-container">
    <div class="query-content">
      <el-form
        ref="queryForm"
        class="queryform"
        :inline="true"
        label-width="100px"
        :model="queryForm"
        size="small"
        @submit.native.prevent
      >
        <el-row :gutter="20">
          <el-col :span="18">
            <el-col v-bind="grid">
              <el-form-item label="功能名称:">
                <el-input
                  v-model.trim="queryForm.name"
                  clearable
                  placeholder="功能名称"
                />
              </el-form-item>
            </el-col>
            <el-col v-bind="grid">
              <el-form-item label="车辆品牌:">
                <el-select
                  v-model="queryForm.car_id"
                  clearable
                  placeholder="请选择品牌"
                  @change="carChange"
                >
                  <el-option
                    v-for="item in carList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-bind="grid">
              <el-form-item label="车辆型号:">
                <el-select
                  v-model="queryForm.type_id"
                  clearable
                  placeholder="请选择车型"
                  @change="typeChange"
                  @focus="typeFocus"
                >
                  <el-option
                    v-for="item in carTypeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-col>
          <template v-if="!fold">
            <el-col :span="18">
              <el-col v-bind="grid">
                <el-form-item label="选择年份:">
                  <el-select
                    v-model="queryForm.play_year"
                    clearable
                    placeholder="选择年份"
                    @focus="yearFocus"
                  >
                    <el-option
                      v-for="item in playYearList"
                      :key="item"
                      :label="item"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col v-bind="grid">
                <el-form-item label="OBD:">
                  <el-select v-model="queryForm.obd" clearable>
                    <el-option
                      v-for="item in obdOptions"
                      :key="item.value + 'obd'"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col v-bind="grid">
                <el-form-item label="允许下载:">
                  <el-select v-model="queryForm.allow" clearable>
                    <el-option
                      v-for="item in obdOptions"
                      :key="item.value + 'allow'"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col v-bind="grid">
                <el-form-item label="用户名:">
                  <el-input
                    v-model.trim="queryForm.username"
                    clearable
                    placeholder="用户名"
                  />
                </el-form-item>
              </el-col>
              <el-col v-bind="grid">
                <el-form-item label="是否新增:">
                  <el-select v-model="queryForm.is_new" clearable>
                    <el-option label="是" :value="1" />
                    <el-option label="否" :value="0" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-col>
          </template>
          <el-col class="query-search" :span="6">
            <el-button icon="el-icon-search" type="primary" @click="queryData">
              查询
            </el-button>
            <el-button @click="resetForm('queryForm')">重置</el-button>
            <el-button type="text" @click="fold = !fold">
              <span>{{ fold ? '展开' : '合并' }}</span>
              <vab-icon
                class="vab-dropdown"
                :class="{ 'vab-dropdown-active': fold }"
                icon="arrow-up-s-line"
              />
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <vab-query-form>
      <vab-query-form-left-panel :span="12">
        <el-button icon="el-icon-plus" type="primary" @click="handleEdit">
          添加
        </el-button>
      </vab-query-form-left-panel>
    </vab-query-form>
    <el-table v-loading="listLoading" :data="list" @sort-change="sortChange">
      <el-table-column
        align="center"
        label="ID"
        prop="id"
        show-overflow-tooltip
        width="55"
      />
      <el-table-column
        align="center"
        label="用户"
        prop="username"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="品牌"
        prop="car_name"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="车型"
        prop="type_name"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="年份"
        prop="play_year"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="功能名"
        prop="name"
        show-overflow-tooltip
        sortable="custom"
      />
      <el-table-column
        align="center"
        label="是否新增"
        prop="name"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <el-tag v-if="row.is_new" type="danger">是</el-tag>
          <el-tag v-else>否</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="英文名"
        prop="name_en"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="编号"
        prop="number_no"
        show-overflow-tooltip
        sortable="custom"
      />
      <el-table-column
        align="center"
        label="功能值ID"
        prop="play_id"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="起始位"
        prop="start_val"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="位长度"
        prop="val_length"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="数值"
        prop="play_val"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="OBD"
        prop="obd"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <span>{{ row.obd == 1 ? '是' : '否' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="允许下载" show-overflow-tooltip>
        <template #default="{ row }">
          <el-switch
            v-model="row.allow"
            :active-value="1"
            :inactive-value="2"
            @change="changeStatus($event, row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="更新时间"
        prop="updated_at"
        show-overflow-tooltip
        width="150"
      />
      <el-table-column align="center" fixed="right" label="操作" width="85">
        <template #default="{ row }">
          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.pageNo"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
    <edit ref="edit" @fetch-data="fetchData" />
  </div>
</template>

<script>
  import {
    getPlayList as getList,
    doPlayDelete as doDelete,
    getTypeList,
    getList as getCarList,
    setPlayAllow,
    getPlayYearList,
  } from '@/api/car'
  import Edit from './components/Edit.vue'

  export default {
    name: 'Car',
    components: { Edit },
    data() {
      return {
        grid: {
          xl: 8,
          lg: 8,
          md: 12,
          sm: 24,
          xs: 24,
        },
        fold: true,
        list: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        queryForm: {
          pageNo: 1,
          pageSize: 10,
          name: '',
          car_id: '',
          type_id: '',
          play_year: '',
          obd: '',
          allow: '',
          username: '',
          is_new: '',
          orderBy: {
            name: '',
            number_no: '',
          },
        },
        typeList: [], //所有类型
        carTypeList: [], //品牌对应类型
        carList: [], //品牌列表
        playYearList: [], //年份列表
        obdOptions: [
          { label: '全部', value: '' },
          { label: '是', value: 1 },
          { label: '否', value: 2 },
        ],
      }
    },
    computed: {
      selectTypeList() {
        return this.typeList.filter((item) => {
          return item.car_id == this.queryForm.car_id
        })
      },
    },
    created() {
      this.fetchData()
      this.fetchTypeData()
      this.fetchCarData()
    },
    methods: {
      setSelectRows(val) {
        this.selectRows = val
      },
      handleEdit(row) {
        if (row.id) {
          this.$refs['edit'].showEdit(this.carList, this.typeList, row)
        } else {
          this.$refs['edit'].showEdit(this.carList, this.typeList)
        }
      },
      handleDelete(row) {
        if (row.id) {
          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
            const { message } = await doDelete({ ids: row.id })
            this.$baseMessage(message, 'success')
            await this.fetchData()
          })
        } else {
          if (this.selectRows.length > 0) {
            const ids = this.selectRows.map((item) => item.id).join()
            this.$baseConfirm('你确定要删除选中项吗', null, async () => {
              const { message } = await doDelete({ ids })
              this.$baseMessage(message, 'success')
              await this.fetchData()
            })
          } else {
            this.$baseMessage('未选中任何行', 'error')
            return false
          }
        }
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val
        this.fetchData()
      },
      sortChange(val) {
        console.log(val)
        const { prop, order } = val
        let _order = ''
        if (order == 'ascending') {
          _order = 'asc'
        } else if (order == 'descending') {
          _order = 'desc'
        }
        this.clearSort()
        this.queryForm.orderBy[prop] = _order
        this.queryForm.pageNo = 1
        this.fetchData()
      },
      clearSort() {
        this.queryForm.orderBy.name = ''
        this.queryForm.orderBy.number_no = ''
      },
      queryData() {
        this.queryForm.pageNo = 1
        this.fetchData()
      },
      resetForm() {
        this.queryForm = {
          pageNo: 1,
          pageSize: 10,
          name: '',
          car_id: '',
          type_id: '',
          play_year: '',
          obd: '',
          allow: '',
          username: '',
          is_new: '',
          orderBy: {
            name: '',
            number_no: '',
          },
        }
      },
      async fetchData() {
        this.listLoading = true
        const { data } = await getList(this.queryForm)
        const { list, total } = data
        this.list = list
        this.total = total
        this.listLoading = false
      },
      async fetchTypeData() {
        const { data } = await getTypeList({ pageSize: 0 })
        const { list } = data
        this.typeList = list
      },
      async fetchCarData() {
        const { data } = await getCarList({ pageSize: 0 })
        const { list } = data
        this.carList = list
      },
      async changeStatus(event, row) {
        this.listLoading = true
        const { code, message } = await setPlayAllow({
          value: event,
          id: row.id,
        })
        let type = 'success'
        if (code) {
          type = 'error'
        }
        this.$baseMessage(message, type)
        this.fetchData()
      },
      //联动
      carChange(val) {
        if (val) {
          this.carTypeList = this.typeList.filter((item) => {
            return item.car_id == val
          })
        } else {
          this.carTypeList = []
          this.queryForm.type_id = ''
        }
      },
      typeFocus() {
        if (!this.queryForm.car_id) {
          this.$baseMessage('请先选择车辆品牌', 'error')
        }
      },
      yearFocus() {
        if (!this.queryForm.type_id) {
          this.$baseMessage('请先选择车辆型号', 'error')
        }
      },
      //获取年份列表
      async typeChange(val) {
        if (val) {
          const { data } = await getPlayYearList({ type_id: val })
          this.playYearList = data
        } else {
          this.playYearList = []
          this.queryForm.play_year = ''
        }
      },
    },
  }
</script>
